<!DOCTYPE html>
<html>

<head>
    <!-- <title>{$info.company}</title> -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <include file="Share:meta" />

    <style type="text/css">
    .modifyaccount {
        padding-top: 50px;
        color: #000;
    }
    
    .modifyaccount .header {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        background-color: #595757;
        height: 50px;
        display: block; z-index: 100;
    }
    
    .modifyaccount .header>div>a {
        line-height: 50px;
        font-size: 16px;
    }
    
    .modifyaccount .header>div>button {
        height: 50px;
        background-color: #595757;
        box-shadow: none;
        border: 0px;
        font-size: 16px;
    }

    .modifyaccount .form-horizontal .form-group{ border-bottom: 1px solid #cececf; padding-bottom: 0px; margin-bottom: 0px; }
    .modifyaccount .form-horizontal .form-group .control-label{ line-height: 30px; color: #595656; border-right: 1px solid #cececf; height: 50px; margin-bottom: 0px; line-height: 50px; font-weight: normal; }
    .modifyaccount .form-horizontal .form-group .form-control{ border: 0px; box-shadow: none; margin-top: 5px; font-size: 18px; height: 40px; }
    </style>
</head>
<body class="modifypage">
    <div class="container-fluid container modifyaccount" style="background-color:#fff;">
        <div id="userList" class="form-horizontal" role="form" >
            <div class="header">
                <div class="col-xs-3 textcenter">
                    <a href="/bizcard/account.html">返回</a>
                </div>
                <div class="col-xs-6 textcenter">
                    <a href="#">账号</a>
                </div>
                <div class="col-xs-3 textcenter">
                    <!-- <button type="submit" class="btn btn-info"></button> -->
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label np textcenter">账号余额</label>
                <div class="col-xs-8">
                    <input type="text" name="money" id="money" class="form-control" v-model="userInfo.money" required="required" readonly="readonly">
                </div>
            </div>
            <div class="form-group">
                <label for="mobile" class="col-xs-4 control-label np textcenter">积分</label>
                <div class="col-xs-8">
                    <input type="text" name="point" id="point" class="form-control" v-model="userInfo.point" required="required" readonly="readonly">
                </div>
            </div>
            <div class="form-group">
                <label for="mobile" class="col-xs-4 control-label np textcenter">账户姓名</label>
                <div class="col-xs-8">
                    <input type="text" name="cardname" id="cardname" class="form-control" v-model="userInfo.cardname" required="required" readonly="readonly">
                </div>
            </div>
            <div class="form-group">
                <label for="mobile" class="col-xs-4 control-label np textcenter">开户银行</label>
                <div class="col-xs-8">
                    <input type="text" name="bank" id="bank" class="form-control" v-model="userInfo.bank" required="required" readonly="readonly">
                </div>
            </div>
            
            <div class="form-group">
                <label for="mobile" class="col-xs-4 control-label np textcenter">银行卡号</label>
                <div class="col-xs-8">
                    <input type="text" name="cardno" id="cardno" class="form-control" 
                    v-model="userInfo.cardno" required="required" readonly="readonly"/>
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label np textcenter">提现金额</label>
                <div class="col-xs-8">
                    <input type="number" name="tixianmoney" id="tixianmoney" class="form-control" v-model="userInfo.tixianmoney" required="required" >
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <p style="font-size: 12px;color: red; text-align: right;; font-weight: ; margin: 5px 0px; font-style: italic;">* 自2017年7月1日起将对每笔提现收取1元手续费</p>
                </div>
            </div>
            <div class="form-group">
                <label for="name_en" class="col-xs-4 control-label np textcenter">短信验证码</label>
                <div class="col-xs-8">
                    <div class="input-group">
                        <input type="text" name="yzm" id="yzm" class="form-control" v-model="yzm" >
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="button" id="send_sms">发送验证码</button>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <div class="clear"></div>
            <div class="line"></div>
            <button type="button" class="btn btn-success margin_top50" 
                style="width: 100%;border: 1px solid #ccc;"v-on:click="tixian()">提现</button>
			<button type="button" class="btn btn-warning margin_top20" 
                style="width: 100%;border: 1px solid #ccc;"v-on:click="goUpdate()">修改提现银行信息</button>
            <div class="margin_top20">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr style="background-color: #E6E6FA;">
                            <th>银行信息</th>
                            <th>金额</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                    	<notempty name="list">
	                        <volist name="list" id="vo">
	                            <tr>
	                                <td>{$vo.bank}</td>
	                                <td>{$vo.money}</td>
	                                <td>
                                        <switch name="vo.status">
                                            <case value="1" break="1">已完成</case>
                                            <case value="2" break="1">失败</case>
                                            <case value="0" break="1">处理中</case>>
                                            <default />未知
                                        </switch>
                                    </td>
	                            </tr>
	                        </volist>
                        <else/>
                        	<tr>
                        		<td colspan="3" class="textcenter"><span>没有更多提现记录</span></td>
                        	</tr>
                        </notempty>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<include file="Share:toast" />
<script type="text/javascript">
    $(function(){ 
        //发送验证码
        $('#send_sms').click(function(){
            if (HjVue.userInfo.mobile =='' || 
                typeof(HjVue.userInfo.mobile)=='undefined'){
                toast('请输入手机号码','warn');
                return;
            }
            var send_obj = $('#send_sms');
            $.ajax({
                type: "GET",
                url: "/Bizcard/checkMobileIsExists",
                data: "mobile="+HjVue.userInfo.mobile,
                dataType: "json",// html/json/jsonp/xml
                success: function(result, opt){                
                   if (result.status == '1'){
                        toastLoading();
                        send_obj.attr('disabled',"disabled");
                          //60秒后重新启动发送按钮
                        startSmsButton(send_obj);
                          //发送短信
                        sendSMSVerify(HjVue.userInfo.mobile);
                   }else{
                        toast("该手机号码不存在", "warn");
                   }
                },
                error: function(){
                    toast("验证手机号码失败", "warn");
                }
            });               
              
            
        });
    })

    var HjVue = new Vue({
        el: '#userList',
        data: {
            userInfo:{
                'cid' : '{$info.cid}',
                'money' :'{$info.money}',
                'mobile' : '{$info.mobile}',
                'name' : '{$info.name}',
                'point' : '{$info.point}',
                'cardname' : '{$info.cardname}',
                'bank' : '{$info.bank}',
                'cardno': '{$info.cardno}',
                'tixianmoney' : ''   //提现金额
            },
            'yzm': ''  //验证码
        },
        methods:{
            tixian: function(){
                if (this.userInfo.cardname==''){
                    toast('请完善账户姓名','warn');
                    return;
                }
                if (this.userInfo.bank==''){
                    toast('请完善开户银行','warn');
                    return;
                }
                if (this.userInfo.cardno==''){
                    toast('请完善银行卡号','warn');
                    return;
                }

                if (this.userInfo.tixianmoney==''){
                    toast('请填写提现金额','warn');
                    return;
                }
                if (this.yzm==''){
                    toast('请填写验证码','warn');
                    return;
                }
                if (this.userInfo.tixianmoney > this.userInfo.money){
                    toast('提现金额大于账户金额','warn');
                    return;
                }
                
                $.ajax({
                    type: "POST",
                    url: "/Api/cashdetail?yzm="+this.yzm,
                    data: this.userInfo,
                    dataType: "json",
                    success: function(result, opt){
                        if (result.status=='1'){
                           toast(result.msg,'success');
                           setTimeout(function(){
                                window.location.href = "/bizcard/account";
                           },1500);
                           
                        }else{
                            toast(result.msg,'warn');
                        }
                    },
                    error: function(){
                        alert('保存失败');
                    }
                });
            },
            goUpdate : function(){
            	window.location.href = "/bizcard/AccountInfo";
            }
        }
    });

    function startSmsButton(obj){
        var count = 1 ;
        var sum = 60;
        var i = setInterval(function(){
          if(count > sum){
            obj.attr('disabled',false);
            obj.html('发送验证码');
            clearInterval(i);
          }else{
            obj.html('剩余'+parseInt(sum - count)+'秒');
          }
          count++;
        },1000);
    };

    function sendSMSVerify(mobile){
        $.ajax({
            type: 'GET',
            url: '/Bizcard/sendMsg',
            data: {mobile:mobile},
            dataType:'json',
            timeout: 12000,
            beforeSend: function(){
                toastLoading();
            },complete: function(){
                toastClose();
            },
            success: function(result,opt){
                toast(result.msg, "success");
            },error: function(){
                toast('短信发送失败','warn');
            }
        })
    };
</script>
</html>
